<body></body>
<script>
  // 1、存储副作用函数的桶
  const bucket = new Set()
  // 2、原始数据
  const data = { text: 'hello world' }
  //  对原始数据的代理
  const obj = new Proxy(data, {
    get(target, key) {
      bucket.add(effect) // 将副作用函数 effect添加到副作用函数的桶里
      return target[key] // 返回属性值
    },
    set(target, key, newVal) {
      target[key] = newVal // 设置属性值
      bucket.forEach((fn) => fn()) // 把副作用函数从桶取出来并执行
      return true // 返回 true 代表设置操作成功
    },
  })
  //4、测试
  function effect() {
    document.body.innerText = obj.text //   副作用函数
  }
  effect() //   执行副作用函数，触发读取
  setTimeout(() => (obj.text = 'hello vue3'), 1000) //   1秒后修改响应式数据
</script>
